<template>
  <div class="wrap">
    <!-- 顶部结构 -->
    <div class="top">
      <div class="hosname">{{ workData.baseMap?.hosname }}</div>
      <div class="line">|</div>
      <div>{{ workData.baseMap?.bigname }}</div>
      <div class="dot">.</div>
      <div class="hosdeparment">{{ workData.baseMap?.depname }}</div>
    </div>
    <!-- 中间展示日期的结构 -->
    <div class="center">
      <h1>{{ workData.baseMap?.workDateString }}</h1>
      <div class="container">
        <div class="item"  v-for="item in workData.bookingScheduleList" :key="item" @click="changeTime(item)"
        :class="{cur: item.workDate == workTime,active:item.status==-1 || item.availableNumber==-1}">
          <div class="top1">{{ item.workDate }} {{ item.dayOfWeek }}</div>
          <div class="bottom">
            <div v-if="item.status==-1">停止挂号</div>
            <div v-if="item.status==0">
              {{ item.availableNumber==-1?'约满了':`有号(${item.availableNumber})` }}
            </div>
            <div v-if="item.status==1">即将放号</div>
          </div>
        </div>
      </div>
    <el-pagination v-model:current-page="pageNo" @current-change="fetchWorfData" layout="prev, pager, next" :total="workData.total" />
    </div>
    <!-- 底部展示医生的结构 -->
    <div class="bottom">
      <div class="will" v-if="workTime.status==1">
        <span>2022年xxxxx放号</span>
      </div>
      <div class="doctor" v-else>
        <!-- 上午 -->
        <div class="moring">
          <!-- 顶部文字 -->
          <div class="tip">
            <svg t="1730970435256" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5939" data-spm-anchor-id="a313x.search_index.0.i13.3f9c3a81pQgOnC" width="26" height="26"><path d="M248.973151 742.414079l-97.735913 97.735914a23.038848 23.038848 0 0 0 32.561572 32.561571l97.787111-97.889505a23.038848 23.038848 0 1 0-32.561572-32.561572zM186.153892 512.025599a21.963702 21.963702 0 0 0-23.294835-23.294836H23.243638a23.294835 23.294835 0 0 0 0 46.538474h139.615419A21.963702 21.963702 0 0 0 186.0003 512.025599z m588.770562-230.388481l97.735913-97.735913a23.038848 23.038848 0 1 0-32.561572-32.561572L742.362882 249.024349a23.038848 23.038848 0 0 0 32.561572 32.561572zM511.974401 186.051497a21.963702 21.963702 0 0 0 23.294836-23.294835V23.294835a23.294835 23.294835 0 0 0-46.538474 0v139.615419a21.963702 21.963702 0 0 0 23.243638 23.141243zM248.973151 281.637118a23.038848 23.038848 0 0 0 32.561572-32.561572L183.79881 148.984551a23.038848 23.038848 0 0 0-32.561572 32.561572z m751.680816 207.093645h-139.615419a23.294835 23.294835 0 1 0 0 46.538474h139.615419a23.294835 23.294835 0 1 0 0-46.538474zM774.770861 742.414079a23.038848 23.038848 0 1 0-32.561571 32.561572l97.735913 97.735913a23.038848 23.038848 0 1 0 32.561572-32.561571zM511.820809 232.743563A279.282036 279.282036 0 1 0 791.102845 512.025599 280.101195 280.101195 0 0 0 511.974401 232.743563z m0 511.974401A232.692365 232.692365 0 1 1 744.513174 512.025599 233.40913 233.40913 0 0 1 511.974401 744.717964z m0 93.076946a21.963702 21.963702 0 0 0-23.294835 23.294836v139.615419a23.294835 23.294835 0 1 0 46.538473 0v-139.615419a21.963702 21.963702 0 0 0-23.090046-23.294836z" fill="#1296db" p-id="5940"></path></svg>
            <span>上午号源</span>
          </div>
          <!-- 医生信息 -->
          <div class="doc_info" v-for="doctor in morningArr" :key="doctor.id">
            <div class="left">
              <div class="info">
                <span>{{ doctor.title }}</span>
                <span>|</span>
                <span>{{ doctor.docname }}</span>
              </div>
              <div class="skill">{{ doctor.skill }}</div>
            </div>
            <div class="right">
              <div class="money">￥{{ doctor.amount }}</div>
              <el-button @click="goStep2(doctor)" type="primary" size="default">{{ doctor.availableNumber }}</el-button>
            </div>
          </div>
        </div>
        <!-- 下午 -->
        <div class="moring">
          <!-- 顶部文字 -->
          <div class="tip">
            <svg t="1730970338401" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4815" width="26" height="26"><path d="M198.5 599.4l-91.3 0c-20.9 0-37.8 16.9-37.8 37.8S86.3 675 107.2 675l90.2 0c-1.2-11.3-1.9-22.80000001-1.9-34.39999999 0.1-14 1.3-27.69999999 3-41.20000001zM223.6 356.4c-14.8-14.8-38.7-14.8-53.5 0-14.8 14.8-14.8 38.7 0 53.5l69.8 69.8c13.1-22 28.5-42.4 46.3-60.6l-62.6-62.7zM916.6 599.4l-91.3 0c1.8 13.5 3 27.2 3 41.2 0 11.6-0.7 23.1-1.9 34.4l90.2 0c20.9 0 37.8-16.9 37.8-37.8s-16.9-37.8-37.8-37.8zM777.29999999 468.7l58.80000001-58.8c14.8-14.8 14.8-38.7 0-53.5-14.8-14.8-38.7-14.8-53.5 0l-54.1 54.1c18.5 17.4 34.9 36.8 48.79999999 58.2zM549.7 326.70000001l0-97.00000001c0-20.9-16.9-37.8-37.8-37.8s-37.8 16.9-37.8 37.8l0 97c12.4-1.5 25-2.5 37.8-2.5 12.8 0 25.4 1 37.8 2.50000001zM101.6 756.5L922.2 756.5c20.9 0 37.8 16.9 37.8 37.8s-16.9 37.8-37.8 37.8l-820.6 0c-20.9 0-37.8-16.9-37.8-37.8s16.9-37.8 37.8-37.8zM261.4 674.9c-1-9.2-1.5-18.5-1.5-28 0-139.2 112.9-252.1 252.1-252.10000001S764 507.7 764 646.9c0 9.5-0.5 18.80000001-1.5 28l-501.1 0z" fill="#1296db" p-id="4816"></path></svg>
            <span>下午号源</span>
          </div>
          <!-- 医生信息 -->
          <div class="doc_info" v-for="doctor in afterArr" :key="doctor.id">
            <div class="left">
              <div class="info">
                <span>{{ doctor.title }}</span>
                <span>|</span>
                <span>{{ doctor.docname }}</span>
              </div>
              <div class="skill">{{ doctor.skill }}</div>
            </div>
            <div class="right">
              <div class="money">￥{{ doctor.amount }}</div>
              <el-button @click="goStep2(doctor)" type="primary" size="default">{{ doctor.availableNumber }}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref,computed } from 'vue';
import {reqHospitalWork,reqHospitalDoctor} from '../../../api/hospital'
import { useRoute,useRouter } from 'vue-router';
import {HospitalWordData,DoctorResponseData,DocArr,Doctor} from '../../../api/hospital/type'
// 获取路由对象
let $route = useRoute();
// 获取路由器对象
let $router = useRouter();
// 分页器当前页码
let pageNo = ref<number>(1);
// 每一页几条数据
let limit = ref<number>(6);
// 存储医院科室挂号的数据
let workData = ref<any>({});
// 存储排版日期:当前数据的第一个
let workTime:any = ref({});
// 存储排班医生的数据
let docArr = ref<DocArr>([])
// 组件挂载完毕发一次请求
onMounted(()=>{
  fetchWorfData()
})
// 获取挂号的数据
const fetchWorfData = async ()=>{
  let result:HospitalWordData = await reqHospitalWork(pageNo.value,limit.value,$route.query.hoscode as string,$route.query.depcode as string)
  if(result.code==200){
    workData.value = result.data
    // 存储第一天日期的数据
    workTime.value = workData.value.bookingScheduleList[0].workDate;
    // 获取一次医生的数据
    getDoctorWorkData();
  }
  
}

// 获取某一天医生排班的数据
const getDoctorWorkData = async ()=>{
  // 医院的编号
  let hoscode:string = $route.query.hoscode as string;
  // 科室的编号
  let depcode:string = $route.query.depcode as string;
  // 时间
  let workDate:string = workTime.value;
  let result:DoctorResponseData = await reqHospitalDoctor(hoscode,depcode,workDate)
  if(result.code==200){
    docArr.value = result.data
  }
}

// 点击顶部某一天的时候触发的回调
const changeTime = (item:any)=>{
  // 存储用户那一天的数据
  workTime.value = item.workDate
  // 再发一次请求
  getDoctorWorkData()
}

// 计算出上午排班的医生数据
const morningArr =  computed(()=>{
  return docArr.value.filter((doc:Doctor)=>{
    return doc.workTime==0;
  })
})

// 计算出下午排班的医生数据
const afterArr =  computed(()=>{
  return docArr.value.filter((doc:Doctor)=>{
    return doc.workTime==1;
  })
})

// 路由跳转进入到选择就诊人页面
const goStep2 = (doctor:Doctor)=>{
  // 编程式导航进行路由跳转且携带医生的id
  $router.push({path:'/hospital/register_step2',query:{docId:doctor.id}})
}
</script>

<style scoped lang="scss">
.wrap{
  .top{
    display: flex;
    color: #7f7f7f;
    margin-top: 30px;
    div{
      margin: 0 5px;
      &.hosname{
        margin-left: 20px;
      }
    }
  }
  .center{
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 60px;
    .container{
      display: flex;
      margin: 30px 0;
      .item{
        flex: 1;
        border: 1px solid skyblue;
        margin: 0 10px;
        cursor: pointer;
        transition: all 0.5s;
        &.active{
          border: 1px solid #ccc;
          color: #7f7f7f;
          .top1{
            background: #ccc;
          }
        }
        &.cur {
          transform: scale(1.1);
          color: rgb(19, 169, 228);
          // background: ;
        }
        .top1{
          background: #e8f2ff;
          line-height: 30px;
        }
        .bottom{
          line-height: 60px;
        }
      }
    }
    .el-pagination{
       margin: 0 auto;
    }
  }
  .bottom{
    .will{
      text-align: center;
      font-size: 23px;
      margin: 30px 0;
    }
    .doctor{
      .moring{
        .tip{
          display: flex;
          align-items: center;
          span{
            color: #7f7f7f;
            font-weight: 700;
          }
        }
        .doc_info{
          display: flex;
          justify-content: space-between;
          margin: 10px 0;
          border-bottom: 1px solid #ccc;
          .left{
            .info{
              color: skyblue;
              margin-bottom: 10px;
              span{
                margin-right:10px;
                font-size: 18px;
              }
            }
            .skill{
              margin: 10px 0;
              color: #7f7f7f;
            }
          }
          .right{
            width: 150px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .money{
              color: #7f7f7f;
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}


</style>